<template>
	<div class="role">
		<div class="title">
			<div class="key">
				<el-form>
					<el-row >
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							<el-form-item label="里程碑">
								<el-select v-model="milepost" clearable @change="search" style="width: 70%;" placeholder="请选择里程碑">
									<el-option
										v-for="item in milepostOptions"
										:key="item.index"
										:label="item.name"
										:value="item.name">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							<el-form-item label="测试组">
								<el-select v-model="group_id" clearable @change="search" style="width: 70%;" placeholder="请选择测试组">
									<el-option
										v-for="item in groupidOptions"
										:key="item.index"
										:label="item.name"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							<el-form-item label="客 户">
								<el-select v-model="customer" clearable @change="search" style="width: 70%;" placeholder="请选择客户">
									<el-option
										v-for="item in customerOptions"
										:key="item.index"
										:label="item.name"
										:value="item.name">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							<el-form-item label="产品线">
								<el-select v-model="product_line_id" clearable @change="search" style="width: 70%;" placeholder="请选择产品线">
									<el-option
										v-for="item in productlineOptions"
										:key="item.index"
										:label="item.name"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row >
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
							<el-form-item label="选状态">
								<el-select v-model="status" clearable @change="search" style="width: 70%;" placeholder="请选择测试组">
									<el-option
										v-for="(item,index) in statusList"
										:key="index"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div>
				<el-row :gutter="10">
					<el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
						<span>关键字:</span>
						<el-input v-model="keywords" clearable placeholder="请输入关键字" style="width: 42%;" @change="search"></el-input>
						<el-button type="primary" @click="search">查询</el-button>
					</el-col>
					<el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="2" v-if="power.includes('order_add')">
						<el-button type="primary" @click="addForm">新增</el-button>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="tab">
			<el-table
				v-if="initTableList"
				class="marT"
				:data="initTableList.slice((current-1)*size, current*size)"
				:border="true"
				:header-cell-style="{background:'#eef1f6'}"
				lazy
				row-key="id">
				<el-table-column align="center" property="order_id" label="订单ID" width="150">
				</el-table-column>
				<el-table-column align="center" property="product_name" label="产品名称" width="150"></el-table-column>
				<el-table-column align="center" property="project_name" label="MODEL" width="150"></el-table-column>
<!--				<el-table-column align="center" property="test_content" label="测试内容" width="150">-->
<!--					<template slot-scope="scope">-->
<!--						<span v-for="(item,index) in getContent(scope.row.test_content)" :key="index" style="margin: 0 3px;">-->
<!--							<el-tag :type="item.length<=3?'success' : (item.length == 4 ? 'warning' : '')">{{item}}</el-tag>-->
<!--						</span>-->
<!--					</template>-->
<!--				</el-table-column>-->
				<el-table-column align="center" property="prototype" label="样机" width="150">
					<template slot-scope="scope">
						<span v-for="(item,index) in getPro(scope.row.prototype)" :key="index" style="margin: 0 3px;">
							<el-tag :type="item.length<=3?'success' : (item.length == 4 ? 'warning' : '')">{{item}}</el-tag>
						</span>
					</template>
				</el-table-column>
				<el-table-column align="center" property="prototype" label="状态" width="150">
					<template slot-scope="scope">
						<el-tag :type="scope.row.status == 1?'success' : (scope.row.status == 0 ? 'warning' : '')">{{scope.row.status_show}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" property="group" label="测试组" width="150">
					<template slot-scope="scope">
						<span>{{getLeader(scope.row.group) || '暂无'}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" property="milepost" label="里程碑"></el-table-column>
				<el-table-column align="center" property="customer" label="客户"></el-table-column>
				<el-table-column align="center" property="own" label="创建信息" width="200">
					<template slot-scope="scope">
						<span>{{getLeader(scope.row.creator_show)}}<br>
							<span style="font-size: 10px;">{{getTime(scope.row.create_time)}}</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="150" fixed="right">
					<template slot-scope="scope">
						<span><a @click="toDetails(scope.row._id)">查看</a></span>
						<span><a > | </a></span>
						<span><a @click="toBianji(scope.row)" :disabled="!power.includes('order_update')">编辑</a></span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="tableSize"
				@size-change="tableSizeChange"
				@current-change="tableCurrentChange"
				:current-page="tableCurrent"
				style="text-align: center;margin-top: 10px;height: 180px;"
				:total="tableTotal">
			</el-pagination>
		</div>
		<addForm ref="addForm"></addForm>
		<seeForm ref="seeForm"></seeForm>
		<editForm ref="editForm"></editForm>
	</div>
</template>

<script>
import { getHeader } from '@/app.config'
import { order, manufactorList, productLineList, groupList, orderOptions } from '@/api/user'
import addForm from "./model/addForm";
import seeForm from "./model/seeForm";
import editForm from "./model/editForm";
export default {
	name: 'product',
	components:{
		addForm,
		seeForm,
		editForm
	},
	data(){
		return {
			value: '',
			size: 10,
			current: 1,
			tableTotal: 1,
			initTableList: [],
			keywords:'',
			tableSize:10,
			tableCurrent:1,
			status:'',
			group_id:'',
			product_line_id:'',
			milepost:'',
			customer:'',

			milepostOptions:[],
			customerOptions:[],
			productlineOptions:[],
			groupidOptions:[],
			statusList:[],
			power:[]
		}
	},
	created() {
		this.initTable()
	},
	methods:{
		search(){
			order({
				keywords:this.keywords,
				group_id:this.group_id,
				product_line_id:this.product_line_id,
				milepost:this.milepost,
				customer:this.customer,
				status:this.status
			}).then(response => {
				if(response.code == 200){
					this.initTableList = response.data.data
					this.tableTotal = response.data.totalCount
				}
			})
		},
		tableSizeChange(val) {
			this.tableSize = val
		},
		tableCurrentChange(val) {
			this.tableCurrent = val
			order({
				pageNo:this.tableCurrent,
				pageSize:this.tableSize
			}).then(response => {
				if(response.code == 200){
					this.initTableList = response.data.data
					this.tableTotal = response.data.totalCount
				}

			})
		},
		initTable(){
			order().then(response => {
				if(response.code == 200){
					this.power = sessionStorage.getItem('power').split(',')
					this.initTableList = response.data.data
					this.tableTotal = response.data.totalCount
				}
			})

			manufactorList().then(res => {
				this.customerOptions = res.data
			})

			productLineList().then(res => {
				this.productlineOptions = res.data
			})

			groupList().then(res => {
				this.groupidOptions = res.data
			})

			orderOptions().then(res => {
				var data = res.data
				this.statusList = data.status_list
				data.mileposts.filter(item => {
					this.milepostOptions.push({name:item})
				})
			})
		},
		getTime(data){
			var d = new Date(data);
			var d2 = d.getTime() - 8 * 60 * 60 * 1000
			d = new Date(d2)
			var  resDate = d.getFullYear() + '-' +
				((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
				(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
				(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
				(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
				(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());

			return resDate
		},
		getLeader(data){
			if(data){
				return data['name']
			}
			else {
				return '暂无'
			}
		},
		getContent(data){
			let name = []
			data.filter((item,index) => {
				name.push(item['test_content'])
			})
			return name
		},
		getPro(data){
			let name = []
			if(data){
				data.filter((item,index) => {
					name.push(item['name'])
				})
				return name
			}else {
				return '暂无'
			}

		},
		addForm(){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(1)
		},
		toBianji(data){
			this.$refs.editForm.dialogFormVisible = true
			this.$refs.editForm.initData(2,data)
		},
		toDetails(data){
			this.$router.push(`/detail/${data}`)
		}
	}
}
</script>

<style lang="scss" scoped>
.role{
	padding: 0 10px;
	min-height: 1100px;
	.tab{
		width: 100%;
		padding: 20px;
		background-color: #fff;
	}

}
.title{
	width: 100%;
	padding: 20px;
	background-color: #fff;
	margin: 5px 0;
}
/deep/ .cell .el-tag {
	margin: 2px 0;
}
</style>
